<template>
  <div>
    <div class="u-title">我的动态({{ totel }})</div>
    <div class="user-dynamic">
      <div class="user-dynamic-left">
        <DynamicLeft :contenr="content" />
      </div>
      <div class="user-dynamic-right">
        <DynamicRight ref="dynamicRight" />
      </div>
    </div>
  </div>
</template>

<script>
import { getDynamic } from "@/api";
import DynamicLeft from "@/views/Dynamic/dynamicLeft.vue";
import DynamicRight from "@/views/Dynamic/dynamicRight.vue";
export default {
  data() {
    return {
      limit: 30,
      content: [],
      lasttime: undefined,
      totel: 0,
    };
  },
  components: {
    DynamicLeft,
    DynamicRight,
  },
  created() {
    this.gtData();
  },
  methods: {
    gtData() {
      getDynamic({
        uid: this.$route.query.id,
        limit: this.limit,
        lasttime: this.lasttime,
      }).then((res) => {
        this.content = res.events;
        this.lasttime = res.lasttime;
        this.totel = res.size;
      });
    },
  },
  beforeRouteUpdate(to, from, next) {
    next();
    this.getData();
    this.$refs.dynamicRight.getData();
  },
};
</script>

<style lang="scss" scoped>
.user-dynamic {
  display: flex;
  .user-dynamic-left {
    flex: 1;
    padding: 10px 25px 0 0;
  }
  .user-dynamic-right {
    width: 250px;
    border-left: 1px solid #ccc;
  }
}
</style>